﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="knockout-2.1.0.js" type="text/javascript"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <ul data-bind="foreach: planets">
        <li>Planet: <b data-bind="text: name"></b>
            <div data-bind="if: capital" style="padding-left: 10px;">
                Capital: <b data-bind="text: capital.cityName"></b>
            </div>
        </li>
    </ul>



    <ul data-bind="foreach: planets">
        <li>Planet: <b data-bind="text: name"></b>
            <!-- ko if: capital -->
            <div style="padding-left: 10px;">
                Capital: <b data-bind="text: capital.cityName"></b>
            </div>

            <!-- /ko-->
            <div data-bind="ifnot: capital">没有这个capital属性</div>
        </li>
    </ul>


    <h1 data-bind="text: city"></h1>
    <p data-bind="with: coords">
        Latitude: <span data-bind="text: latitude"></span>,
    Longitude: <span data-bind="text: longitude"></span>
    </p>

    <script>

        var viewmodel = {
            planets: [
                    { name: '上海', capital: null },
                    { name: '北京', capital: { cityName: '石景山' } }],
            city: "London",
            coords: {
                latitude: 51.5001524,
                longitude: -0.1262362
            }
        };
        ko.applyBindings(viewmodel);

    </script>






</body>
</html>
